<template>
  <div class="edit">
    <div class="edit-item">
      <span>修改头像</span>
      <!-- 图片上传组件 -->
      <UploadImg
        action="/api/upload?type=user"
        :imageUrl="avatar"
        @res-url="
          (data) => {
            avatar = data.resImgUrl;
          }
        "
      ></UploadImg>
    </div>
    <div class="edit-item">
      <span>修改名称</span>
      <el-input v-model="name" placeholder="请输入用户名"></el-input>
    </div>
    <div class="edit-item">
      <span>个人简介</span>
      <el-input v-model="sign" placeholder="请输入简介"></el-input>
    </div>
    <div>
      <el-button type="primary" size="medium" @click="save">保存</el-button>
    </div>
  </div>
</template>
<script>
import UploadImg from "@/components/UploadImg.vue";
import { EditUser } from "@/apis/user.js";
export default {
  components: { UploadImg },
  data() {
    return {
      avatar: this.$store.state.userInfo.avatar,
      name: this.$store.state.userInfo.name,
      sign: this.$store.state.userInfo.sign,
    };
  },
  methods: {
    async save() {
      // 做校验
      // 掉接口
      let data = await EditUser({
        avatar: this.avatar,
        name: this.name,
        sign: this.sign,
      });
      // 成功后跳转至个人空间
      if (data.code === 0) {
        // 成功后跳转个人空间
        this.$message.success("修改个人信息成功！");
        this.$router.push({
          name: "user-space",
        });
      } else {
        this.$message.error(data.mes);
      }
    },
  },
};
</script>
<style lang="stylus" scoped>
.edit {
  background-color: #fff;
  padding: 10px 0 20px 20px;

  .edit-item {
    display: flex;
    margin-bottom: 20px;
    align-items: center;

    .el-input {
      width: 60%;
    }
  }

  .edit-item span {
    margin-right: 10px;
  }
}
</style>